<ui:component xmlns="http://www.w3.org/1999/xhtml"
              xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:c="http://java.sun.com/jstl/core"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:rich="http://richfaces.org/rich"
              xmlns:a4j="http://richfaces.org/a4j"
              xmlns:msn="http://www.contact.messanger.com/contacts/msn/ui"
              xmlns:common="http://www.contact.common.com/contacts/ui">

    <h:panelGroup id="floatingGroup" layout="block">

        <a4j:outputPanel style="margin: auto;" id="quickChatPanel" layout="block">
            <rich:toolBar height="16px"  width="100%">
                <rich:toolBarGroup location="right">

                    <c:forEach items="#{chatSessionBean.quickChatRooms}" var="chatRoom" varStatus="i">

                        <a4j:form id="form_quickChatRoom#{i.index}" style="height:100%">

                            <h:panelGroup id="window"
                                          layout="block"
                                          style="display:#{chatRoom.chatProtected ? 'none' : 'block'};
                                                 position:absolute;
                                                 top:-305px;
                                                 width:200px;
                                                 height:300px"
                                    >
                                <rich:panel styleClass="box" bodyClass="padding0"
                                            header="#{resources.quickchatBarButton}  #{msn:quickChatUsers(chatRoom.chatTopic , baseUI.baseCoreFacade.activeUser.info.firstName)}"
                                        >
                                    <ui:include src="chatWindow.xhtml">
                                        <ui:param name="chatRoom" value="#{chatRoom}"/>
                                        <!--<ui:param name="width" value="195px"/>-->
                                        <ui:param name="height" value="230px"/>
                                    </ui:include>
                                </rich:panel>
                            </h:panelGroup>

                            <a4j:outputPanel id="button"
                                      style="width:185px;"
                                      styleClass="dr-menu-label rich-ddmenu-label dr-menu-label-unselect rich-ddmenu-label-unselect"
                                      layout="block"
                                      onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"
                                      onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"
                                >
                                <a4j:support event="onclick" action="#{chatRequestBean.visibility}" oncomplete="toggleWindow('form_quickChatRoom#{i.index}:window');" ajaxSingle="true">
                                     <f:setPropertyActionListener value="#{chatRoom.uniqueKey}" target="#{chatRequestBean.roomKey}"/>
                                </a4j:support>

                                    <a4j:commandButton value="close"
                                                   type="image"
                                                   requestDelay="1000"
                                                   action="#{chatRequestBean.closeRoom}"
                                                   onclick="if (event.stopPropagation) event.stopPropagation(); else event.cancelBubble = true; hideButton({targetId:'form_quickChatRoom#{i.index}:button'});toggleWindow('form_quickChatRoom#{i.index}:window',false);"
                                                   image="./style/images/closeTab.png"
                                                   style="vertical-align:middle;float:right;"
                                                   styleClass="hidelink"
                                        >
                                    <f:setPropertyActionListener value="#{chatRoom.uniqueKey}" target="#{chatRequestBean.roomKey}"/>
                               </a4j:commandButton>
                                <h:outputText styleClass="dr-label-text-decor rich-label-text-decor"
                                              value="#{resources.quickchatBarButton} #{msn:quickChatUsers(chatRoom.chatTopic , baseUI.baseCoreFacade.activeUser.info.firstName)}"/>
                            </a4j:outputPanel>

                        </a4j:form>
                    </c:forEach>

                    <a4j:form id="form_onlineFriends">
                        <h:panelGroup id="window"
                                      layout="block"
                                      style="display:none;
                                                 position:absolute;
                                                 top:-305px"
                                >
                            <rich:panel styleClass="box"
                                        header="#{resources.quickchatOnlineFriendsButton}"
                                        style="overflow-y:auto;width:170px;height:300px"
                                    >
                                <ui:include src="onlineFriends.xhtml"/>
                            </rich:panel>
                        </h:panelGroup>

                        <a4j:outputPanel id="button"
                                      style="width:155px;text-align:center;"
                                      styleClass="dr-menu-label rich-ddmenu-label dr-menu-label-unselect rich-ddmenu-label-unselect"
                                      layout="block"
                                      onclick="toggleWindow('form_onlineFriends:window');"
                                      onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"
                                      onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"
                                >
                            <h:panelGroup layout="block" styleClass="dr-label-text-decor rich-label-text-decor">
                                <h:outputText value="#{resources.quickchatOnlineFriendsButton}"/>
                            </h:panelGroup>

                        </a4j:outputPanel>
                    </a4j:form>
                </rich:toolBarGroup>
            </rich:toolBar>
        </a4j:outputPanel>
    </h:panelGroup>
    <!---->
    <rich:effect name="hideWindow" type="Fade" params="duration:0.8"/>
    <rich:effect name="showWindow" type="Appear" params="duration:0.8"/>
    <rich:effect name="hideButton" type="SwitchOff" params="duration:0.4"/>

    <script type="text/javascript">
    //<![CDATA[
        function toggleWindow(windowId, show)
        {

            if (document.getElementById(windowId).style.display != 'none')
            {
                if (show != null)
                    if (show == true)
                        return;
                hideWindow({targetId:windowId});
                //document.getElementById(windowId).style.display = 'none';
            }
            else
            {
                if (show != null)
                    if (show == false)
                        return;
                showWindow({targetId:windowId});
                //document.getElementById(windowId).style.display = 'block';
            }
        }
    //]]>
    </script>
</ui:component>